<template>

    <div id="computed_props">
        千米 : <input type="text" v-model="kilometers"><br/>
        米 : <input type="text" v-model="meters">

        <p id="info">{{"修改前值为: " + this.oldValue + "，修改后值为: " + this.kilometers}}</p>

    </div>
</template>
<script type="text/javascript">
    export default {

        name: "monitor",
        data() {
            return {
                kilometers: 0,
                meters: 0,
                oldValue: 0

            }
        },
        methods: {},
        computed: {},
        watch: {
            kilometers: function (newVal, oldval) {
                this.kilometers = newVal;
                this.meters = newVal * 1000;


                this.oldValue = oldval;


            },
            meters: function (val) {
                this.kilometers = val / 1000;
                this.meters = val/1000;
            },


        },

    }
</script>

<style scoped>

</style>